<template>
  <div>
    <h1>App...</h1>
    <p>{{ num }}</p>
    <!--
      给元素绑定事件，元素会添加上这个DOM事件
      给组件绑定事件，都是自定义事件，组件本身并不会绑定DOM事件
      需求：给组件绑定DOM事件
        1. 去组件内部，给某个元素绑定
        2. @click.native 加上native事件修饰符
          让绑定的事件变成原生DOM事件（给组件的最外层元素绑定DOM事件）
     -->
    <!-- <Child @add="add" @click.native="num++" /> -->
    <!-- <Child @add="add" /> -->

    <!-- ref获取DOM元素或组件实例对象 -->
    <Child ref="child" />
  </div>
</template>

<script>
import Child from "./views/Child";

/*
  自定义事件：事件机制
    1. 绑定事件
      - @add="add"

      - <Child ref="child"/>
      - mounted -> this.$refs.child.$on("add", this.add);
      - 事件名称可以任意
      - 注意：哪个组件绑定事件，哪个组件才能触发
    2. 触发事件
      this.$emit(事件名称, 参数1, 参数2, 参数3...);
    3. 解绑
      this.$off(事件名称) 解绑事件的所有回调
      this.$off(事件名称, 事件回调函数) 解绑事件的单个回调

    4. 使用场景
      父子组件
      子组件修改父组件数据
*/

export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
  mounted() {
    // this.$refs.child.$on("add", this.add); // 持久事件
    this.$refs.child.$once("add", this.add); // 一次性事件
  },
  methods: {
    add(x, ...rest) {
      console.log(rest);
      this.num += x;
    },
  },
  components: {
    Child,
  },
};
</script>

<style>
</style>
